<template>
  <div>
    <el-row style="margin-top: 10px;float: left">
    <el-input v-model="CarInfo.carCode" placeholder="请输入车牌号" @input="changeValue" style="width:150px;float:left;margin-top:5px;margin-bottom: 5px" clearable></el-input>
    <el-input v-model="CarInfo.carBrand" placeholder="请输入品牌" @input="changeValue" style="width:150px;float:left;margin-left:5px;margin-top:5px;margin-bottom: 5px" clearable></el-input>
    <el-button type="primary" size="medium" @click="carInfoByCode" style="width:150px;float:left;margin-left:5px;margin-top: 5px;margin-bottom: 5px">查询</el-button>
  </el-row>
<!--  添加车辆  -->
    <el-row style="margin-top: 5px;margin-bottom: 5px ;float: right" >
      <el-button type="primary" @click="dialogFormVisible = true ;addCarInfo()" size="medium" >添加车辆信息</el-button>
    </el-row>



    <!--  弹出表单  -->
    <el-dialog title="车辆信息" :visible.sync="dialogFormVisible">
      <el-form :model="Car">
        <el-form-item label="车牌号" :label-width="formLabelWidth">
          <el-input v-model="Car.carCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌" :label-width="formLabelWidth">
          <el-input v-model="Car.carBrand" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="Car.prize" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="购买日期" :label-width="formLabelWidth">
          <el-input v-model="Car.carBuyday" autocomplete="off" type="date"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" style="float: left">
          <el-select v-model="Car.carState" placeholder="请选择活动区域">
            <el-option label="预定" value="预定"></el-option>
            <el-option label="维修中" value="维修中"></el-option>
            <el-option label="可用" value="可用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="carAdd">确 定</el-button>
      </div>
    </el-dialog>

<!--  修改弹出  -->
    <el-dialog title="修改车辆" :visible.sync="dialogFormVisibleEdit">
      <el-form :model="Car">
        <el-form-item label="序号" :label-width="formLabelWidth">
          <el-input v-model="Car.carId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车牌号" :label-width="formLabelWidth">
          <el-input v-model="Car.carCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌" :label-width="formLabelWidth">
          <el-input v-model="Car.carBrand" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth">
          <el-input v-model="Car.prize" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="购买日期" :label-width="formLabelWidth">
          <el-input v-model="Car.carBuyday" autocomplete="off" type="date"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" style="float: left">
          <el-select v-model="Car.carState" placeholder="请选择活动区域">
            <el-option label="预定" value="预定"></el-option>
            <el-option label="维修中" value="维修中"></el-option>
            <el-option label="可用" value="可用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCarInfo">确 定</el-button>
      </div>
    </el-dialog>

    <!--    数据显示 -->

    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <!--  prop :表示每一次循环显示对象的属性的值  -->
      <el-table-column
        prop="carId"
        label="序号"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="carCode"
        label="车牌号"
        align="center"
        width="200">
      </el-table-column>
      <el-table-column
        prop="carBrand"
        label="品牌"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="prize"
        label="价格"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="carBuyday"
        label="购买日期"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="carState"
        label="车辆状态"
        align="center"
        width="100">
      </el-table-column>


      <el-table-column
        label="操作"
        align="center"
        width="150">
        <!--      scope:所有的数据
                  scope.row:获取某一行的属性
        -->
        <template slot-scope="scope">
          <el-button @click="dialogFormVisibleEdit = true ;updateCar(scope.row)" type="primary" size="small" icon="el-icon-edit" circle></el-button>
          <el-button @click="deleteCarById(scope.row.carId)"  type="danger" size="small" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页插件-->
    <center>
      <div class="block" v-show="isLike">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.page"
          :page-sizes="[1, 2, 3, 5]"
          :page-size="pageData.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </center>

  </div>
</template>


<script>
export default {
  data() {
    return {
      pageData: {
        page: 1,//默认第一页
        size: 5,//显示条数默认5条/页
      },
      total: 0,
      //模糊查车牌号和品牌
      CarInfo:{
        carCode:'',
        carBrand:'',
      },
      tableData:[],
      isLike:true,
      dialogFormVisible: false,
      dialogFormVisibleEdit:false,
      //新增车辆信息
      Car: {
        carId: '',
        carCode: '',
        carBrand: '',
        prize: '',
        carBuyday: '',
        carState: ''
      },
      formLabelWidth: '120px'
    }

  },
  methods: {
    updateCarInfo() {//修改
      this.$confirm('确定修改？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogFormVisibleEdit=false;
        let _this=this;
        console.log(this.Car)
        this.$axios({
          method:'Post',
          url:'car_info/carInfoUpdate/',
          data:JSON.stringify(this.Car),
        }).then(res =>{
          console.log(res)
          if(res.data.status === 200){
            _this.$message(res.data.msg);
            _this.showTable()
          }else{
            console.log(res.data)
          }
        }).catch(error=>{
          this.$message.error(error);
        })
      });    },
    updateCar(CarEdit){
      this.Car.carBrand = CarEdit.carBrand;
      this.Car.carState = CarEdit.carState;
      this.Car.carBuyday = CarEdit.carBuyday;
      this.Car.carId = CarEdit.carId;
      this.Car.carCode = CarEdit.carCode;
      this.Car.prize = CarEdit.prize;
    },
    deleteCarById(carId) {//删除
      this.$confirm('确认删除？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogFormVisible=false;
        let _this=this;
        console.log(carId)
        this.$axios({
          method:'delete',
          url:'car_info/carInfoDele/'+carId,
        }).then(res =>{
          console.log(res)
          if(res.data.status === 200){
            _this.$message(res.data.msg);
            _this.showTable()
          }else{
            console.log(res.data)
          }
        }).catch(error=>{
          this.$message.error(error);
        })
      });
    },
    showTable() {
      let _this = this;
      this.$axios({
        method: 'get',
        url: 'car_info/carInfoAll/',
        params: this.pageData
      }).then(res => {
        console.log(res)
        if (res.data.status === 200) {
          console.log(res.data)
          console.log(res.data.data)
          //push方法将对象转成数组
          _this.tableData = res.data.data.records;
          _this.total = res.data.data.total;
          console.log("table:", this.tableData)
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        this.$message.error(error);
      })
    },
    handleSizeChange(newSize) { // size 发送改变执行的函数
      this.pageData.size = newSize;
      this.showTable()
      console.log(newSize)
    },
    handleCurrentChange(newPage) {// page 发送改变执行的函数
      this.pageData.page = newPage
      this.showTable()
      console.log(newPage)
    },
    changeValue (e) {
      this.$forceUpdate()
    },
    carInfoByCode(){
      let _this = this;
      this.$axios({
        method: 'get',
        url: 'car_info/carInfoByCode/',
        params:this.CarInfo
      }).then(res => {
        if(res.data.status === 200) {
          // _this.CarInfo.carCode = _this.CarCode
          // _this.CarInfo.carBrand = _this.CarBrand
          console.log(res.data.data)
          _this.tableData = res.data.data
          _this.isLike=false
        }
        else {
          console.log(res.data)
        }
        }).catch(error => {
        _this.$message.error(error);
      })
    },
    carAdd(){
      this.$confirm('确定添加？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogFormVisible=false;
        let _this=this;
        console.log(this.Car)
        this.$axios({
          method:'Post',
          url:'car_info/carInfoInsert/',
          data:JSON.stringify(this.Car),
        }).then(res =>{
          console.log(res)
          if(res.data.status === 200){
            _this.$message(res.data.msg);
            _this.showTable()
          }else{
            console.log(res.data)
          }
        }).catch(error=>{
          this.$message.error(error);
        })
      });
    },
    addCarInfo(){
      this.CarInfo={};
      console.log(this.CarInfo)
    },
    },
    mounted() {
      this.username = sessionStorage.getItem('loginUsername')
      this.showTable()
    }


}
</script>
<style scoped>

</style>
